<template>
  <div class="content">
    <div class="cotainer">
      <el-form label-position="right" label-width="80px" :model="formData">
        <el-form-item label="选择套餐" v-for="(item,index) in formData.packages" :key="index">
          <div class="fx-row fx-row-center">
            <el-select v-model="formData.packages[index].name" placeholder="请套餐产品">
              <el-option label="套餐一" value="shanghai"></el-option>
              <el-option label="套餐二" value="beijing"></el-option>
            </el-select>
            <label style="width: 60px;" class="el-form-item__label">数量</label>
            <el-input v-model="formData.packages[index].count" class="coutInpt" placeholder="请输入数量"></el-input>

            <div class="addicon fx-1" v-if="index==formData.packages.length-1" @click="addproduct">
                <span style="color: red;margin-right: 5px"><i class="el-icon-circle-plus"></i></span>添加套餐
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即添加</el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'add',
    components: {},
    data() {
      return {
        formData: {
          name: '',
          packages:[
            {name:"shanghai",count:1},
//                  {name:"beijing",count:1}
          ],
          type: ''
        }
      }
    },
    methods: {
      addproduct(){
        this.formData.packages.push( {name:"shanghai",count:1})
      },
      onSubmit(){

      }

    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '~@/styles/chow.scss' ;//引入公共css类
  .el-select,.el-input{
    width: 300px;
  }

  /deep/ .coutInpt{
    width: 120px;
    margin-left: 0px;
    .el-input__inner{
      text-align: center;
    }
  }
  .addicon{
    width: 100px;
    text-align: center;
    cursor: pointer;
  }
  .cotainer{
    width: 700px;
  }
</style>
